
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/common/includes.jsp"%>

<!DOCTYPE html>
<html lang="${currentLocale}">
<head>
<title>悠儿</title>
<%@ include file="/WEB-INF/common/meta.jsp"%>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<%@ include file="/WEB-INF/common/global_res.jsp"%>
<link rel="stylesheet" href="${ctx}/res/lib/jquery-ui/themes/base/jquery.ui.all.css">
<style type="text/css">
	#picItems {
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 600px;
	}
	
	#picItems li {
		margin: 3px 3px 3px 0;
		padding: 1px;
		float: left;
		width: 190px;
		height: 190px;
		font-size: 4em;
		text-align: center;
	}
	
	#picItems li img {
		max-width: 190px;
		max-height: 190px;
	}
</style>
</head>
<body>
	<%@ include file="/WEB-INF/common/header.jsp" %>

	<div class="container" id="topicList">
		<div class="row">
			<div class="span9">
				<div class="row-fluid">
					<div class="span12">
						<ul id="picItems">
							<c:forEach var="picItemView" items="${picItemViewList}" varStatus="status">
							<li class="ui-state-default">
								<c:url var="imgUrl" value="/img/picitem/n/${picItemView.id}.jpg" />
								<img src="${imgUrl}" id="img_${picItemView.id}" />
							</li>
							</c:forEach>
						</ul>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<button class="btn" id="seqSubmit">提交</button>
					</div>
				</div>
			</div>
			
			<div class="span3 rightbox">
				<div class="row-fluid">
					<div class="span12">
					</div>
				</div>
			</div>
			
		</div>

	</div>

	<%@ include file="/WEB-INF/common/footer.jsp"%>

</body>
<script src="${ctx}/res/lib/jquery-ui/ui/jquery.ui.core.js"></script>
<script src="${ctx}/res/lib/jquery-ui/ui/jquery.ui.widget.js"></script>
<script src="${ctx}/res/lib/jquery-ui/ui/jquery.ui.mouse.js"></script>
<script src="${ctx}/res/lib/jquery-ui/ui/jquery.ui.draggable.js"></script>
<script src="${ctx}/res/lib/jquery-ui/ui/jquery.ui.sortable.js"></script>
<script>
	$(function(){
	    $("#picItems").sortable({
	    	placeholder: "ui-state-highlight"
		});
		$("#picItems").disableSelection();
	    
		$("#seqSubmit").click(function(){
			var ids = '';
			$.each($("img[id^='img_']"), function(idx){
				var id = $(this).attr("id").split("_")[1];
				ids += id + ",";
			})
			console.log(ids);
			$.ajax({
		        url: "${ctx}/picitem/seq",
		        type: 'post', 
		        data: {ids: ids},
		        success: function(data){
		        	if(data == 1){
		        		alert("排序成功");
		        	}else{
		        		alert("排序失敗");
		        	}
		        },
		        error: function(xhr, status, err){
		    		alert("Error");
		    	}
		    });
		});
	});
</script>
</html>